<template>
  <div>
    <template v-if="flag">
      <el-page-header @back="goBack" content="教师评价"></el-page-header>
      <template>
        <el-row :gutter="24">
          <el-col :span="24">
            <span>1.教学目标明确，重难点突出，教学内容符合学情</span>
          </el-col>
          <el-col :span="24">
            <el-radio v-model="form.WorkerEvaluationOption1" label="5">不满意</el-radio>
            <el-radio v-model="form.WorkerEvaluationOption1" label="10">一般</el-radio>
            <el-radio v-model="form.WorkerEvaluationOption1" label="15">满意</el-radio>
            <el-radio v-model="form.WorkerEvaluationOption1" label="20">很满意</el-radio>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <span>2.教学过程设计合理、新颖，亮点突出</span>
          </el-col>
          <el-col :span="24">
            <el-radio v-model="form.WorkerEvaluationOption2" label="5">不满意</el-radio>
            <el-radio v-model="form.WorkerEvaluationOption2" label="10">一般</el-radio>
            <el-radio v-model="form.WorkerEvaluationOption2" label="15">满意</el-radio>
            <el-radio v-model="form.WorkerEvaluationOption2" label="20">很满意</el-radio>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <span>3.教学手段使用合理，能灵活使用教学媒体激发学生兴趣</span>
          </el-col>
          <el-col :span="24">
            <el-radio v-model="form.WorkerEvaluationOption3" label="5">不满意</el-radio>
            <el-radio v-model="form.WorkerEvaluationOption3" label="10">一般</el-radio>
            <el-radio v-model="form.WorkerEvaluationOption3" label="15">满意</el-radio>
            <el-radio v-model="form.WorkerEvaluationOption3" label="20">很满意</el-radio>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <span>4.师生互动，学生参与度高</span>
          </el-col>
          <el-col :span="24">
            <el-radio v-model="form.WorkerEvaluationOption4" label="5">不满意</el-radio>
            <el-radio v-model="form.WorkerEvaluationOption4" label="10">一般</el-radio>
            <el-radio v-model="form.WorkerEvaluationOption4" label="15">满意</el-radio>
            <el-radio v-model="form.WorkerEvaluationOption4" label="20">很满意</el-radio>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <span>5.教师关注全体的同时注重个性差异，课堂教学、作业注重分层</span>
          </el-col>
          <el-col :span="24">
            <el-radio v-model="form.WorkerEvaluationOption5" label="5">不满意</el-radio>
            <el-radio v-model="form.WorkerEvaluationOption5" label="10">一般</el-radio>
            <el-radio v-model="form.WorkerEvaluationOption5" label="15">满意</el-radio>
            <el-radio v-model="form.WorkerEvaluationOption5" label="20">很满意</el-radio>
          </el-col>
        </el-row>
        <el-button type="primary" @click="AddWorkerEvaluation">提交按钮</el-button>
      </template>
    </template>
    <template v-if="!flag">
      <el-table :data="Evaluation" style="width: 100%" max-height="650px">
        <el-table-column prop="WorkerName" label="职工名称" width="300" align="center"></el-table-column>
        <el-table-column prop="CourseName" label="课程名称" width="300" align="center"></el-table-column>
        <el-table-column label="分值" width="300" align="center">
          <template
            slot-scope="scope"
          >{{scope.row.WorkerEvaluationOption1+scope.row.WorkerEvaluationOption2+scope.row.WorkerEvaluationOption3+scope.row.WorkerEvaluationOption4+scope.row.WorkerEvaluationOption5}}</template>
        </el-table-column>
        <el-table-column label="查看" width="300" align="center">
          <template slot-scope="scope">
            <el-link type="primary" @click="evalation(scope.row)">评价</el-link>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
      Evaluation: [],
      user: "",
      form: {
        WorkerEvaluationOption1: 0,
        WorkerEvaluationOption2: 0,
        WorkerEvaluationOption3: 0,
        WorkerEvaluationOption4: 0,
        WorkerEvaluationOption5: 0
      }
    };
  },
  created() {
    this.GetWorkerEvaluation();
  },
  mounted() {},
  methods: {
    goBack() {
      this.flag = false;
    },
    evalation(row) {
      this.flag = true;
      this.form.WorkerEvaluationOption1 = row.WorkerEvaluationOption1;
      this.form.WorkerEvaluationOption2 = row.WorkerEvaluationOption2;
      this.form.WorkerEvaluationOption3 = row.WorkerEvaluationOption3;
      this.form.WorkerEvaluationOption4 = row.WorkerEvaluationOption4;
      this.form.WorkerEvaluationOption5 = row.WorkerEvaluationOption5;
    },
    GetWorkerEvaluation() {
      this.user = JSON.parse(sessionStorage.getItem("user"));
      this.$axios({
        method: "get",
        url: this.$api.GetWorkerEvaluation,
        data: {},
        params: {
          token: this.user.Token
        }
      }).then(res => {
        console.log(res);
        res.data.message.forEach(element => {
          element.WorkerEvaluationOption1 = Number(
            element.WorkerEvaluationOption1
          );
          element.WorkerEvaluationOption2 = Number(
            element.WorkerEvaluationOption2
          );
          element.WorkerEvaluationOption3 = Number(
            element.WorkerEvaluationOption3
          );
          element.WorkerEvaluationOption4 = Number(
            element.WorkerEvaluationOption4
          );
          element.WorkerEvaluationOption5 = Number(
            element.WorkerEvaluationOption5
          );
        });
        this.Evaluation = res.data.message;
      });
    }
  }
};
</script>

<style scoped>
.el-row {
  text-align: left;
  margin: 40px;
}
.el-row .el-col {
  margin-top: 15px;
}
</style>
